/*------------------------------------------------*/
/*	Chart
/*------------------------------------------------*/

/* easy pie chart */
.easy-pie-chart {
	position: relative;
	width: 110px;
	margin: 0 auto;
	margin-bottom: 15px;
	text-align: center;

	canvas {
		position: absolute;
		top: 0;
		left: 0;
	}

	.percent {
		@include inline-block;

		line-height: 110px;
		z-index: 2;

		&:after {
			content: '%';
			margin-left: 0.1em;
			font-size: .8em;
		}

	}
}

/* chart navigation */
.chart-nav {
	margin-bottom: 40px;

	@include max-screen($break-xsmall) {
		strong {
			display: block;
		}
	}

	ul {
		@include inline-list;

		border-bottom: none;
		margin-bottom: 30px;

		li {

			a {
				font-size: 0.9em;
				border: none;
				padding: 5px 8px;
				color: $base-font-color-dark;

				&:hover {
					border: none;
					text-decoration: none;
					background-color: $body-bg-color;
					border-bottom: 1px solid #E1E1E1;
				}
			}

			&.active {
				a, a:hover {
					background-color: $body-bg-color;
					border-bottom: 1px solid #E1E1E1;
				}
			}
		}
	}
}

.chart-content {
	margin-bottom: 15px;
}

#line-chart1 {
	height: 250px;
}

// flot chart
.flot-tooltip {
	border: 1px solid #ccc;
	background-color: rgba(#fff, 0.7);
	color: #aaa;
}

#flotTip {
	@include border-radius(0 !important);

	background-color: #f3f3f3 !important;
	color: $base-font-color-dark !important;
	border-color: darken(#f3f3f3, 20%) !important;
}

.sales-chart,
.demo-flot-chart {
	width: 100%;
	height: 350px;
}

#visit-chart {
	height: 300px;
}

.widget.real-time-chart {
	.widget-content {
		padding-right: 40px;
	}

	#demo-real-time-chart {
		font-size: 12px;
		padding-right: 40px;

		@include max-screen($break-small) {
			.flot-x-axis .flot-tick-label {
				display: none;
			}
		}
	}	
}


.donut-label {
	font-size: 12px;
	color: #FFF;
	background: rgba(0, 0, 0, 0.5);
	text-align: center;
	padding: 3px;
}

.secondary-stat {
	.secondary-stat-item {
		color: #fff;
		background-color: #aaa;
		padding: 5px 20px 0 20px;

		.data {
			float: left;
			margin-bottom: 0;
		}

		.inlinesparkline {
			@include inline-block;

			position: absolute;
			left: 15px;
			bottom: 0;
		}
	}

	#secondary-stat-item1 {
		background-color: #3F7577;
	}

	#secondary-stat-item2 {
		background-color: #67773F;
	}

	#secondary-stat-item3 {
		background-color: #D36B19;
	}
}

// sparkline tooltip fix
.jqstooltip {
	@extend #flotTip;

	width: initial !important;
	height: initial !important;
}

.jqsfield {
	color: $base-font-color-dark !important;
}

.widget-sparkline {

	.sparkline-stat-item {
		padding: 8px 0;
		margin-bottom: 30px;

		strong {
			display: block;
			font-size: 1.5em;
			font-weight: 300;
		}
	}
}

/* dashboard mini pie chart */
.panel-pie-chart {
	.panel-body {
		text-align: center;
	}

	ul {
		@include inline-block;
		margin-bottom: 0;

		> li {
			text-align: center;
			font-size: 0.85em;
			padding-right: 24px;
			margin-bottom: 5px;
		}
	}
}

/* big number with sparkline */
.big-number {
	font-family: $secondary-font-family-light;
	font-size: 3.5em;
}

.big-number-stat {
	span {
		@include inline-block;
	}

	em {
		display: block;
		font-style: normal;
	}

	.col-left {
		float: left;
		margin-right: 10px;
		line-height: 1.8;
	}

	.col-right {
		float: right;
		position: relative;
		top: 1.5em;

		@include max-screen($break-xsmall) {
			float: none;
		}
	}

	@include max-screen($break-xsmall) {
		span {
			display: block;
		}

		.col-left {
			float: none;
		}

		.col-right {
			top: 0;
			margin-bottom: 15px;
		}
	}
}

/* interactive charts, choices toggle checkbox */
.widget-chart-toggle-series {
	#choices {
		@include max-screen($break-medium) {
			margin-top: 30px;

			> div {
				@include inline-block;
			}
		}
	}
}

/* d3 heatmap */
#demo-d3-heatmap svg {
	max-width: 100%;
	max-height: 100%;
}

rect.bordered {
	stroke: #E6E6E6;
	stroke-width: 1px;
}

text {
	&.mono {
		font-size: 12px;
		fill: #aaa;
	}

	&.axis-workweek {
		fill: #000;
	}

	&.axis-worktime {
		fill: #000;
	}
}

/* d3 barchart */
#demo-d3-barchart svg {
	max-width: 100%;
	max-height: 100%;
}

.bar {
	&.positive {
		fill: #1D92AF;
	}

	&.negative {
		fill: #BD0026;
	}
}

.axis {
	text {
		font-size: 10px;
	}

	path,
	line {
		fill: none;
		stroke: #646464;
		shape-rendering: crispEdges;
	}
}



